<template>
  <div class="container">
    <Row class="toolbar">
      <h1>头</h1>
      <h3>todo state里面当前组件更改为当前组件的key</h3>
      <h3>todo getters里面新增当前组件,配置查询组件的方法</h3>
    </Row>
    <Row class="main-content">
      <Col span="4" class="leftpane">
        <Params></Params>
      </Col>

      <Col span="14" class="viewport">
        <Control :option="option" />
      </Col>

      <Col span="6" class="rightpane">
        <Parts></Parts>
      </Col>
    </Row>
  </div>
</template>

<script>
import Render from "@/components/Render";
import Control from "@/components/Control";
import Parts from "./component/Parts";
import Params from "./component/Params";

export default {
  components: { Render, Parts, Control, Params },
  data() {
    return {
      option: {
        key: 0,
        name: "main",
        attribute: {
          style: "width:100%;height:100%;"
        },
        children: []
      }
    };
  },
  created() {
    // console.log(this.$options);
  }
};
</script>

<style lang="less" scoped>
@red: red; // 值变量
@yellow: yellow;
@blue: blue;
@col: gray;

@toolbar: toolbar; // 选择器变量
@toolbarId: #toolbarId;

@bg: background; // 属性变量

@staticUrl: "/static/"; // url变量

@toolbarClass: {
  // 声明变量
  @col: pink; // 变量作用域

  width: 30px;
  height: 30px;
  @{bg}: @col;
};

.@{toolbar} {
  background: @yellow;

  // & → 上一层选择器的名字
  & @{toolbarId} {
    width: 100px;
    height: 100px;
    @{bg}: @blue;
  }

  .toolbarClass {
    @toolbarClass();
  }
}

.container {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.main-content {
  flex: 1;
}

.leftpane,
.viewport,
.rightpane {
  height: 100%;
}

.leftpane {
  border-right: 1px solid #f0f0f0;
}

.rightpane {
  border-left: 1px solid #f0f0f0;
}
</style>